<template>
	<view class="recommendingCommodities">
		<view class="flex_ac flex_sb">
			<image style="width: 288rpx;height: 30rpx;" src="https://img.aibbyp.com/wechatUser/asdasd.png" mode=""></image>
			<view class="name2 f24" @click="$wanlshop.to('/pages/homeRecommend/classify/category')">
				去采购
			</view>
		</view>
		<view class="flex_sb mt24">
			<view class="forBox" v-for="(item,key) in data" :key="key"  @click="$wanlshop.to('/pages/product/goods?id='+item.id)">
				<view class="f24">
					<image class="img" :src="$wanlshop.oss(item.image) " mode=""></image>
					<view class="c3d overflow_1">
						{{item.title}}
					</view>
					<view class="error">
						￥{{item.price}}
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "recommendingCommodities",
		props: {
			data: {
				type: Array,
				default () {
					return [];
				}
			},
		},
		created() {
			console.log(this.data);
		}
	}
</script>

<style lang="scss" scoped>
	.recommendingCommodities {
		width: 100%;
		overflow: hidden;
		padding: 14rpx 24rpx;
		background: #FFFFFF;
		border: 2rpx solid #FD5342;
		border-radius: 20rpx;

		.name1 {}

		.forBox {
			width: 23%;
		}

		.img {
			width: 100%;
			height: 130rpx;
			border-radius: 12rpx;

		}

		.name2 {
			padding: 4rpx 22rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			background: linear-gradient(180deg, #FE5949 0%, #FD5342 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}
	}
</style>